<template>
  <page-layout title="我的">
	  <view class="container">
		<!-- 顶部个人信息卡片 -->
		<view class="user-header">
			<view class="bg-decoration"></view>
			<view class="user-card">
				<view class="avatar-container">
					<image class="avatar" src="/static/avatar.jpg" mode="aspectFill"></image>
				</view>
				<view class="user-info">
					<view class="user-name">用户昵称</view>
					<view class="user-id">ID: 76543210</view>
					<view class="brief-intro">这个人很懒，什么都没有留下</view>
				</view>
				<button class="edit-btn" @tap="goToEditProfile">编辑资料</button>
			</view>
			
			<!-- 数据统计 -->
			<view class="stat-bar">
				<view class="stat-item" @tap="goToFollowers">
					<text class="stat-num">256</text>
					<text class="stat-label">粉丝</text>
				</view>
				<view class="stat-item" @tap="goToFollowing">
					<text class="stat-num">128</text>
					<text class="stat-label">关注</text>
				</view>
				<view class="stat-item" @tap="goToReceiveLikes">
					<text class="stat-num">1024</text>
					<text class="stat-label">获赞</text>
				</view>
			</view>
		</view>

    <!-- 底部功能菜单 -->
		<view class="feature-menu">
			<uni-list :border="true">
				<uni-list-item link title="我的贴子" @tap="goToMyPosts"></uni-list-item>
				<uni-list-item link title="我的点赞" @click="goToMyLikes"></uni-list-item>
				<uni-list-item link title="获赞" @click="goToReceiveLikes"></uni-list-item>
				<uni-list-item link title="收藏" @click="goToCollect"></uni-list-item>
				<uni-list-item link title="浏览历史" @click="goToHistory"></uni-list-item>
				<uni-list-item link title="帮助与反馈" @click="goToHelp"></uni-list-item>
				<uni-list-item link title="关于" @click="goToAbout"></uni-list-item>
			</uni-list>
		</view>
	</view>
  </page-layout>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import uniList from '@dcloudio/uni-ui/lib/uni-list/uni-list.vue';
import uniListItem from '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue';
import PageLayout from "../../components/PageLayout.vue";

// 标签页
const tabs = ['帖子', '收藏', '点赞'];
const currentTab = ref(0);
const tabLineLeft = ref(30);
const contentHeight = ref(500);

// 我的帖子列表
const posts = ref([]);
const hasMore = ref(true);
const page = ref(1);

// 切换标签页
const switchTab = (index) => {
	currentTab.value = index;
	tabLineLeft.value = 30 + index * (750 / 3);
};

// 轮播切换
const swiperChange = (e) => {
	currentTab.value = e.detail.current;
	tabLineLeft.value = 30 + currentTab.value * (750 / 3);
};

// 加载更多帖子
const loadMore = () => {
	if (!hasMore.value) return;
	
	// 模拟加载数据
	setTimeout(() => {
		const newPosts = Array(5).fill(0).map((_, index) => {
			const id = posts.value.length + index + 1;
			
			return {
				id: id,
				title: '我发布的第' + id + '个话题',
				content: '这是我在岚迹社区发布的内容，记录生活点滴。内容可能会比较长，这里是预览部分...',
				createTime: '3天前',
				images: id % 2 === 0 ? ['/static/mock-image.jpg', '/static/mock-image.jpg'] : [],
				viewCount: Math.floor(Math.random() * 1000),
				likeCount: Math.floor(Math.random() * 100),
				commentCount: Math.floor(Math.random() * 50)
			};
		});
		
		posts.value = [...posts.value, ...newPosts];
		
		// 模拟没有更多数据
		if (page.value >= 3) {
			hasMore.value = false;
		} else {
			page.value += 1;
		}
	}, 1000);
};

// 查看帖子详情
const viewPostDetail = (postId) => {
	uni.navigateTo({
		url: `/pages/post/detail?id=${postId}`
	});
};

// 编辑个人资料
const goToEditProfile = () => {
	uni.navigateTo({
		url: '/pages/user/edit-profile'
	});
};

// 跳转到发布帖子
const goToCreatePost = () => {
	uni.navigateTo({
		url: '/pages/post/create'
	});
};

// 跳转到首页
const goToHome = () => {
	uni.switchTab({
		url: '/pages/index/index'
	});
};

// 跳转到粉丝列表
const goToFollowers = () => {
	uni.navigateTo({
		url: '/pages/user/followers'
	});
};

// 跳转到关注列表
const goToFollowing = () => {
	uni.navigateTo({
		url: '/pages/user/following'
	});
};

// 跳转到获赞页面
const goToReceiveLikes = () => {
	uni.navigateTo({
		url: '/pages/user/received_likes'
	});
};

// 跳转到我的点赞页面
const goToMyLikes = () => {
	uni.navigateTo({
		url: '/pages/user/likes'
	});
};

// 跳转到我的贴子
const goToMyPosts = () => {
	console.log('正在跳转到我的贴子页面');
	uni.navigateTo({
		url: './posts',
		fail: (err) => {
			console.error('跳转失败:', err);
			uni.showToast({
				title: '跳转失败，请重试',
				icon: 'none'
			});
		},
		success: () => {
			console.log('跳转成功');
		}
	});
};

// 底部菜单功能
const goToWallet = () => {
	uni.showToast({
		title: '钱包功能开发中',
		icon: 'none'
	});
};

const goToCollect = () => {
	uni.navigateTo({
		url: '/pages/user/collections'
	});
};

const goToHistory = () => {
	uni.navigateTo({
		url: '/pages/user/history'
	});
};

const goToSettings = () => {
	uni.navigateTo({
		url: '/pages/settings/index'
	});
};

const goToHelp = () => {
	uni.navigateTo({
		url: '/pages/common/feedback'
	});
};

const goToAbout = () => {
	uni.navigateTo({
		url: '/pages/common/about'
	});
};

// 页面初始化
onMounted(() => {
	// 设置内容高度
	const systemInfo = uni.getSystemInfoSync();
	// 底部安全区高度 + TabBar高度 + header高度 + tabs高度
	const safeAreaHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom + 50 + 300 + 100;
	contentHeight.value = systemInfo.windowHeight - safeAreaHeight;
	
	// 加载初始数据
	loadMore();
});
</script>

<style lang="scss">
page {
	background-color: #f5f7fa;
	height: 100%;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 个人信息卡片 */
.user-header {
	position: relative;
	overflow: hidden;
}

.bg-decoration {
	height: 200rpx;
	background: linear-gradient(135deg, #6e8efb, #a777e3);
	border-radius: 0 0 50% 50% / 20%;
}

.user-card {
	margin: -90rpx 30rpx 0;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	padding: 30rpx;
	display: flex;
	position: relative;
	z-index: 1;
}

.avatar-container {
	position: relative;
}

.avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	border: 4rpx solid #fff;
	margin-right: 30rpx;
}

.user-info {
	flex: 1;
	padding-top: 10rpx;
}

.user-name {
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
	display: flex;
	align-items: center;
}

.user-id {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.brief-intro {
	font-size: 26rpx;
	color: #666;
	line-height: 1.4;
}

.edit-btn {
	position: absolute;
	right: 30rpx;
	top: 30rpx;
	background: #f0f2f5;
	font-size: 24rpx;
	color: #666;
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
	line-height: 1.4;
}

.stat-bar {
	margin: 30rpx;
	background: #fff;
	border-radius: 16rpx;
	display: flex;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30rpx 0;
	position: relative;
	
	&:after {
		content: '';
		position: absolute;
		right: 0;
		top: 20rpx;
		bottom: 20rpx;
		width: 1rpx;
		background: #ebedf0;
	}
	
	&:last-child:after {
		display: none;
	}
}

.stat-num {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #999;
}

/* 内容区域 */
.content-area {
	flex: 1;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
	margin: 0 30rpx;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.03);
}

.tabs {
	display: flex;
	position: relative;
	background: #fff;
	height: 100rpx;
}

.tab-item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.tab-text {
	font-size: 28rpx;
	color: #666;
	transition: all 0.3s;
}

.tab-item.active .tab-text {
	color: #6e8efb;
	font-weight: 500;
}

.tab-line {
	position: absolute;
	bottom: 0;
	left: 30rpx;
	width: 30rpx;
	height: 6rpx;
	background: #6e8efb;
	border-radius: 3rpx;
	transition: all 0.3s;
}

.content-swiper {
	width: 100%;
}

.tab-scroll {
	height: 100%;
}

.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	
	image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 30rpx;
	}
}

.action-btn {
	background: #6e8efb;
	color: #fff;
	font-size: 28rpx;
	padding: 12rpx 40rpx;
	border-radius: 40rpx;
}

/* 帖子列表 */
.post-list {
	padding: 30rpx;
}

.post-item {
	margin-bottom: 30rpx;
	border-bottom: 1rpx solid #ebedf0;
	padding-bottom: 30rpx;
	
	&:last-child {
		margin-bottom: 0;
		border-bottom: none;
	}
}

.post-content {
	margin-bottom: 20rpx;
}

.post-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.post-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.post-images {
	position: relative;
	width: 100%;
	height: 200rpx;
	background: #f0f2f5;
	border-radius: 12rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
}

.post-image {
	width: 100%;
	height: 100%;
}

.image-count {
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 24rpx;
	padding: 6rpx 16rpx;
	border-radius: 30rpx;
}

.post-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.post-time {
	font-size: 24rpx;
	color: #999;
}

.post-stats {
	display: flex;
}

.stat {
	margin-left: 20rpx;
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999;
	
	.iconfont {
		font-size: 28rpx;
		margin-right: 6rpx;
	}
}

.list-footer {
	text-align: center;
	padding: 30rpx 0;
	font-size: 26rpx;
	color: #999;
}

/* 功能菜单 */
.feature-menu {
	margin: 30rpx;
	margin-bottom: 150rpx; /* 添加底部安全区域 */
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
}
</style> 